<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link type="text/css" rel="stylesheet" href="static/css/app.css">

     <script type="text/javascript" src="static/js/jquery.min.js"></script>
     <script type="text/javascript" src="static/js/rem.js"></script>

     <link rel="stylesheet" type="text/css" href="static/css/swiper.min.css"/>

     <script type="text/javascript" src="static/js/swiper.min.js"></script>
      <style>
          body{

          }
          header{   width: 100%;height: 50px;  position: fixed;background-color: rgba(0,0,0,0.1); z-index: 1000}
           header ul li {  height: 50px; line-height: 50px; text-align: left; display: none; color: #323237; position: relative;font-size: 18px;text-indent: 10px;}
           header ul li.active{ display: block; }
           .fl{float: left;opacity:1;}
           .jt img{height: 18px; margin-top: 15px;margin-left: 15px; padding-right: 5px}
          .fr{float: right;opacity:1;}
             .sz img{height: 18px;margin-top: 15px;padding-right: 15px}
             .frame{ background-position: center center; height: 290px}
             #wxtx{border-radius:6px;}
.tx{position: absolute; right: 20px; top: 250px;}
.wxm{color: #fff; line-height: 40px; font-size: 15px; font-weight: bold; margin-right: 20px;}
.pyq{ margin-top: 40px}
.mescroll-rotate {
    -webkit-animation: mescrollRotate .6s linear infinite;
    animation: mescrollRotate .6s linear infinite;
}
@-webkit-keyframes mescrollRotate{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes mescrollRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.mescroll-upwarp {
    min-height: 30px;
    padding: 15px 0;
    text-align: center;
    visibility: hidden;
}  .upwarp-progress {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid gray;
    border-bottom-color: transparent;
    vertical-align: middle;
} .upwarp-tip {
    margin-left: 8px;
}  .upwarp-tip  {
    display: inline-block;
    font-size: 12px;
    color: gray;
    vertical-align: middle;
}
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
.time{font-size: 11px}
.po-hd{word-break:break-all}
.wz img{height: 14px;}
.wz{line-height: 18px; }
.post{padding-top: 0px; margin-top: -10px; }
      </style>
  </head>
  <body>
    <div id="frame" class="frame">
    <header id="header">
      <div class="fl jt"  tapmode onclick="api.closeWin();" ><img id="jt" src="../image/fhb.png" height="40" ></div>
        <ul style="float: left;">
            <li class="border-b active" id="title"></li>

        </ul>
    <div id="ss"class="fr sz" ><img id="xj"  src="../image/xjb.png" height="40" ></div>
    </header>
 <div class="tx">
    <div class="fl wxm" id="wxm">微信名</div>
   <div class="fl"><img src='../image/default1.png'  srcs="{{= crhtml }}"  class="imgCache"   id="wxtx" height="60" ></div>

 </div>
  </div>




  <div id="list">



</div>

<div id="jz" class="mescroll-upwarp mescroll-hardware" style="visibility: visible; display:none;"><p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">正在加载..</p></div>



<div class="big_img">
    <div class="swiper-container2">
      <div class="swiper-wrapper">

      </div>
    </div>
    <div class="swiper-pagination2"></div>
</div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script  type="text/javascript"  src="../script/jquery-2.1.1.min.js"></script>
 <script  type="text/javascript"  src="../script/jquery.md5.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script src="../libs/mescroll.min.js"></script>
<script type="text/x-dot-template" id="category_template">
{{~ it  : value : index }}

{{ if(index==cr){ }}

 {{= crhtml }}

{{

}
}}
<div class="pyq">
<div class="pyqlist">
  <div>
<img src='../image/default1.png'  srcs="{{= value.thumb }}"  class="imgCache"    style="width:100%" >
</div>
</div>
</div>
	{{~}}
</script>
  <script type="text/javascript">

tm=0.1;

var  cr=Math.floor(Math.random()*(6-1)+1 );
var crhtml,pyq2;
  function getScrollTop(){
  	var scrollTop=0;
  	if(document.documentElement&&document.documentElement.scrollTop){
  		scrollTop=document.documentElement.scrollTop;
  	}else if(document.body){
  		scrollTop=document.body.scrollTop;
  	}

if(scrollTop>=215){

//  var obj = document.getElementById("header");
  //        obj.style.cssText =  "background-color: rgba(237,237,237,1); ";
 $api.css(  $api.byId("header"),'background-color: rgba(237,237,237,1); ');
  $api.attr(  $api.byId("jt"),'src','../image/fhh.png');
    $api.attr(  $api.byId("xj"),'src','../image/xjh.png');
      $api.html(  $api.byId("title"), '朋友圈');
}else{
    $api.css(  $api.byId("header"),'background-color: rgba(0,0,0,0.1);');
    $api.attr(  $api.byId("jt"),'src','../image/fhb.png');
      $api.attr(  $api.byId("xj"),'src','../image/xjb.png');
        $api.html(  $api.byId("title"), '');
}

  	return scrollTop;
  }
  document.onscroll = function(){
 getScrollTop()
  }


function jz(data){
  var category = $api.byId('list');
   var category_template = $api.byId('category_template');
//
 pagefn = doT.template(category_template.text);
  // category.append(pagefn(data));
   $api.append(category, pagefn(data));
_zyzImgCache()
}

      apiready = function(){
        var header = $api.byId('header');

            header.style.paddingTop = api.safeArea.top +"px" ;


            api.ajax({
            url:localStorage.getItem('domain')+"/index.php/Home/Index/pyq.html",
            method: 'get'
          },function(ret,err){

  $api.css(  $api.byId("frame"),'background:url('+localStorage.getItem('domain')+ret.bj[0].thumb+') no-repeat ;');

      $api.html(  $api.byId("wxm"),localStorage.getItem('wxm'));
          $api.attr(  $api.byId("wxtx"), 'src',localStorage.getItem('tx'));

   crhtml=' <ul><li><div class="po-avt-wrap"> <img class="po-avt" src="'+ localStorage.getItem('tx')+'"> </div><div class="po-cmt"><div class="po-hd"><p class="po-name"> '+localStorage.getItem('wxm')+' </p><p class="post"><div class="wz" >'+localStorage.getItem('pyqwz')+'</div> <img class="data-avt" src="'+localStorage.getItem('domain')+localStorage.getItem('wdpyq')+'"> </p><p class="time"> '+localStorage.getItem('fbsj')+'&nbsp;&nbsp;  <span style="color: #3b5384; font-size:11px">删除</span></p><div class="tc1"> <img class="c-icon" src="static/picture/c.png"><div class="tc2"> </div></div> </div><div class="cmt-wrap">';
if(localStorage.getItem('pyqhf')!=''){
  crhtml=crhtml+' <div class="cmt-list"><p> <span class="data-name">'+ localStorage.getItem('wxm')+'</span> <span> ： </span> '+localStorage.getItem('pyqhf')+' </p></div>'
}
    crhtml=crhtml+'</div></div></li></ul>'
 console.log(crhtml);
  var category = $api.byId('list');
   var category_template = $api.byId('category_template');
//
pyq1=ret.pyq.slice(0,10)
pyq2=ret.pyq.slice(11,999)
 pagefn = doT.template(category_template.text);
   category.innerHTML = pagefn(pyq1);



_zyzImgCache()
          });

fnInitPushRefresh( )
      };

      function fnInitPushRefresh( ) {

        api.addEventListener({
          name: 'scrolltobottom',
          extra: {
            threshold: 500
          }
        }, function(ret, err) {

$api.css(  $api.byId("jz"),'display:block ;');

setTimeout(function () {
  jz(pyq2)

     $api.css(  $api.byId("jz"),'display:none ;');
}, 3000);

        });
      }
  </script>


<script>
$(document).ready(function(){
  /*调起大图 S*/
   var mySwiper = new Swiper('.swiper-container2', {
        loop: false,
        pagination: '.swiper-pagination2',
        })
    $("#list").on("click", "img.data-avt ",
    function() {
        var imgBox = $(this).parents("img.data-avt");
        var i = $(imgBox).index(this);
        $(".big_img .swiper-wrapper").html("")

      //  for(var j = 0 ,c = imgBox.length; j < c ;j++){
         $(".big_img .swiper-wrapper").append('<div class="swiper-slide"><div class="cell"><img src="'   +localStorage.getItem('domain')+localStorage.getItem('wdpyq')+  '" / ></div></div>');
    //    }
        mySwiper.updateSlidesSize();
        mySwiper.updatePagination();
        $(".big_img").css({
            "z-index": 991001,
            "opacity": "1"
        });
        mySwiper.slideTo(i, 0, false);
        return false;
    });

    $(".big_img").on("click",
    function() {
        $(this).css({
            "z-index": "-1",
            "opacity": "0"
        });

    });
  });
  /*调起大图 E*/
</script>

  </html>
